<template>
  <div class="detailWrap">
    <el-row type="flex" justify="space-between">
      <el-col class="main">
        <!-- 面包屑 -->
        <el-row>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/post' }"
              >旅游攻略</el-breadcrumb-item
            >
            <el-breadcrumb-item>旅游详情</el-breadcrumb-item>
          </el-breadcrumb>
        </el-row>
        <!-- 文章标题 -->
        <el-row class="title">
          <h1>{{ postDetail.title }}</h1>
        </el-row>
        <!-- 文章浏览次数和创作时间 -->
        <el-row class="post-info">
          <span>攻略：{{ postDetail.created_at }} </span>
          <span>阅读：{{ postDetail.watch }}</span>
        </el-row>
        <!-- 文章内容 -->
        <el-row class="post-content" v-html="postDetail.content"> </el-row>
        <!-- 评论和分享图标 -->
        <el-row class="post-operate">
          <div class="commentNum" @click="clickComment">
            <div class="iconfont">
              <i class="el-icon-edit-outline"></i>
              <p v-if="postDetail.comments">
                评论({{ postDetail.comments.length }})
              </p>
            </div>
          </div>
          <div class="share" @click="handleShare">
            <div class="iconfont">
              <i class="el-icon-share"></i>
              <p>分享</p>
            </div>
          </div>
          <div class="like" @click="handleLike">
            <div class="iconfont">
              <i class="el-icon-star-on"></i>
              <p>点赞({{ postDetail.like || 0 }})</p>
            </div>
          </div>
        </el-row>
        <el-row class="commentTitle">
          <h4>评论</h4>
        </el-row>
        <el-row>
          <el-input
            type="textarea"
            resize="none"
            placeholder="说点什么吧..."
            v-model="commentContent"
            ref="inputDom"
          >
          </el-input>
        </el-row>
        <el-row class="uploadPic" type="flex" justify="space-between">
          <el-col :span="21">
            <el-upload
              action="http://157.122.54.189:9095/upload"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-success="success"
              :on-remove="handleRemove"
              :file-list="img"
              name="files"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-col>
          <el-col :span="3" class="btn">
            <el-button type="primary" @click.native="submitComment"
              >提交</el-button
            >
          </el-col>
        </el-row>
        <el-row class="comment" v-if="commentList.length > 0">
          <MainComment
            v-for="comment in commentList"
            :key="comment.id"
            :commentData="comment"
          />
        </el-row>
        <el-row
          class="noComment"
          v-if="total == 0"
          @click.native="$refs.inputDom.focus()"
        >
          <span>暂无评论，赶紧抢占沙发！</span>
        </el-row>
        <el-row class="pagination">
          <el-pagination
            layout="total,sizes,prev, pager, next,jumper"
            :total="total"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            :current-page="currentPage"
            @size-change="sizeChange"
            @current-change="currentChange"
            @prev-click="currentChange"
            @next-click="currentChange"
          >
          </el-pagination>
        </el-row>
      </el-col>
      <!-- 右侧推荐列表 -->
      <el-col class="recommendList">
        <h4 class="asideTitle">相关攻略</h4>
        <AsideArticle v-for="post in articleList" :key="post.id" :post="post" />
      </el-col>
    </el-row>
    <div>
      <el-dialog
        title="请先登录或注册"
        width="30%"
        :visible.sync="dialogVisible"
      >
        <span>
          <Dialog @closeDialog="closeDialog" />
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      dialogVisible: false,
      postDetail: {},
      articleList: [],
      commentContent: "",
      pics: [],
      img: [],
      dialogImageUrl: "",
      dialogVisible: false,
      commentList: [],
      commentId: "",
      start: 0,
      pageSize: 5,
      total: 0,
      currentPage: 1,
    };
  },
  created() {
    this.loadData(); //文章数据请求函数
    //推荐列表数据请求
    this.$axios({
      url: "/posts/recommend",
    }).then((res) => {
      //   修改时间显示模式
      this.articleList = res.data.data.map((item) => {
        item.created_at = moment(item.created_at).format("YYYY-MM-DD HH:mm");
        return item;
      });
      //   console.log(this.articleList);
    });
    this.loadComment();
  },
  watch: {
    //   监听URL变化
    $route() {
      this.loadData();
      this.loadComment();
    },
    "$store.state.comment.isClick": {
      handler() {
        this.commentId = this.$store.state.comment.commentId;
        this.$refs.inputDom.focus();
        this.commentContent = "";
      },
    },
  },
  methods: {
    // 关闭弹出框
    closeDialog() {
      this.dialogVisible = false;
    },
    handleShare() {
      this.$message.closeAll();
      this.$message.info("暂不支持分享");
    },
    handleLike() {
      this.$message.closeAll();
      this.$message.info("暂不支持点赞");
    },
    clickComment() {
      this.$refs.inputDom.focus();
      this.$store.commit("comment/changeId", {
        id: "",
        name: "",
      });
    },
    currentChange(page) {
      this.start = this.pageSize * (page - 1);
      this.loadComment();
    },
    sizeChange(size) {
      this.pageSize = size;
      this.loadComment();
    },
    loadComment() {
      this.$axios({
        url: "/posts/comments",
        params: {
          post: this.$route.query.id,
          _start: this.start,
          _limit: this.pageSize,
        },
      }).then((res) => {
        console.log(res.data);
        this.commentList = res.data.data.map((item) => {
          item.created_at = moment(item.created_at).format("YYYY-MM-DD HH:mm");
          return item;
        });
        this.total = res.data.total;
      });
    },
    loadData() {
      this.$axios({
        url: "/posts",
        params: { id: this.$route.query.id },
      }).then((res) => {
        //   修改时间显示模式
        res.data.data[0].created_at = moment(
          res.data.data[0].created_at
        ).format("YYYY-MM-DD HH:mm");
        this.postDetail = res.data.data[0];
      });
    },
    handleRemove(file, fileList) {
      this.pics = fileList.map((item) => {
        return item.response[0];
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    success(res, file) {
      this.img.push(file);
      this.pics.push(res[0]);
    },

    submitComment() {
      if (!this.commentContent) {
        this.$message.warning("评论内容不能为空");
        this.$refs.inputDom.focus();
        return;
      }
      if (!this.$store.state.user.userInfo.token) {
        this.dialogVisible = true;
        return;
      }
      this.$axios({
        url: "/comments",
        method: "post",
        data: {
          content: this.commentContent,
          pics: this.pics,
          post: this.$route.query.id,
          follow: this.commentId,
        },
        headers: {
          Authorization: "Bearer " + this.$store.state.user.userInfo.token,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.message == "提交成功") {
          this.pics = [];
          this.img = [];
          this.commentContent = "";
          this.commentId = "";
          this.loadComment();
          this.$store.commit("comment/changeId", {
            id: "",
            name: "",
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.detailWrap {
  width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
  .main {
    width: 700px;
    .title {
      h1 {
        padding: 20px 0;
        border-bottom: 1px solid #ddd;
      }
    }
    .post-info {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 20px;
      span {
        font-size: 16px;
        margin-left: 20px;
        color: #999;
      }
    }
    .post-content {
      /deep/ img {
        max-width: 700px;
        object-fit: cover;
        margin: 10px 0;
        &:nth-of-type(2) {
          width: 56px;
          height: 56px;
        }
      }
    }
    .post-operate {
      display: flex;
      justify-content: space-between;
      margin: 50px 80px 30px;
      font-size: 14px;
      .commentNum {
        width: 100px;
        height: 54px;
        text-align: center;
      }
      .iconfont {
        cursor: pointer;
        text-align: center;

        width: 100px;
        p,
        i {
          width: 100%;
        }
        p {
          font-size: 14px;
          color: #999;
        }
      }
      .el-icon-edit-outline,
      .el-icon-share,
      .el-icon-star-on {
        font-size: 30px;
        color: orange;
      }
    }
    .commentTitle {
      h4 {
        font-weight: 400;
        font-size: 18px;
        margin-bottom: 20px;
      }
    }
    .uploadPic {
      padding: 30px 0;
      .btn {
        padding-left: 18px;
      }
    }
    .comment {
      border: 1px solid #ddd;
      border-bottom: 0;
    }
    .noComment {
      padding: 30px 0;
      text-align: center;
      color: #888;
      border: 1px solid #ddd;
      cursor: pointer;
    }
    .pagination {
      padding: 20px 0;
    }
  }
  .recommendList {
    width: 280px;
    .asideTitle {
      font-size: 18px;
      font-weight: 400;
      padding-bottom: 10px;
      border-bottom: 1px solid #ddd;
    }
  }
  /deep/.el-textarea__inner {
    &:focus {
      border-color: orange;
    }
  }
}
</style>